<template>

    <div>

        <!--            标题-->
        <el-row class=" border_bottom" type="flex" justify="start">
            <el-col :span="2">
                <h1> 添加角色</h1>
            </el-col>
        </el-row>
        <el-row>
            <el-input v-model="roleName" style="width: 300px"  aria-placeholder="角色名称">

            </el-input>
        </el-row>
        <el-row>
            <el-input v-model="roleDesc" style="width: 300px" aria-placeholder="角色描述">

            </el-input>
        </el-row>

        <el-row>
<h3>角色权限选择：</h3>
            <el-tree
                    :data="data"
                    show-checkbox
                    node-key="menuId"
                    default-expand-all
                    :default-checked-keys="quanxianArr"
                    ref="tree"
                    highlight-current
                    :props="defaultProps">
            </el-tree>

        </el-row>


        <el-row>
            <el-button type="primary" plain @click="getCheckedNodes">添加</el-button>

        </el-row>

    </div>

</template>

<script>

    import jwtDecode from "jwt-decode";

    export default {
        name: "AddRole",
        data(){
            return{
                currentRoleList:[],
                data: [],
                roleName:'',
                //默认选中
                quanxianArr:[],
                defaultProps: {
                    children: 'subMenu',
                    label: 'menuName'
                },
                currentRole:'',
                roleDesc:''

            }
        }
        ,


        created() {

            //获取所有的权限列表
            this.$axios.post('/api/admin/getAuth').then((res)=>{
                // console.log(res);
                if (res.data.code == 200) {
                    this.data=res.data.data
                }
            })


        },
        methods:{
            open2() {
                this.$message({
                    message: '权限更新成功！',
                    type: 'success'
                });
            },


            getCheckedNodes() {
                var menuArr=this.$refs.tree.getCheckedNodes()

                var menuIdArr=[]


                menuArr.forEach(function (item) {
                    menuIdArr.push(item.menuId)
                })
                console.log(menuIdArr)


                // 发起请求添加角色

                this.$axios.post('/api/admin/addRole?roleName='+this.roleName+'&roleDesc='+this.roleDesc+'&authIds=',[...menuIdArr]).then((res)=>{

                    console.log(res);

                })

            },
        }
    }
</script>

<style scoped>
    .border_bottom {

        border-bottom: 1px solid grey;
    }
</style>